<script setup>
    import {ref} from 'vue'
    let count = ref(0); // 别忘记设置为 响应式数据
    const increment = (n) => {
        n = n || 1
        count.value += n; // value 别忘记加了
    }
    const add = () => count.value++;
</script>


<template>
<div>
    <div>{{ count }}</div>
    <!-- 内联/行内代码 -->
    <button v-on:click="count++">+1</button>
    <!-- 函数（无参）通过实验可得 只有在没有参数的情况下 函数才可以不加小括号 否则都要加() 不然就会失效-->
    <button v-on:click="increment">+1 无小括号 但是有形参</button>
    <button v-on:click="add">+1 无小括号 无形参</button>
    <button v-on:click="increment()">+1 有小括号</button>
    <button v-on:click="increment(3)">+3</button>
    <button v-on:click="increment(5)">+5</button>
    <!-- v-on: 可以简写为 @ -->
    <button @click="add">+1</button>
</div>
</template>


<style scoped>

</style>